<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>限制输入的年份和月份</title>
	</head>
	<body>
		<form>
		年度<input type="text" /><span id="yearError"></span>
		<br>
		月份<input type="text" /><span id="monthError"></span>
		<br>
		<input type="button"value="查询" />
		</form>
		<script>
			/*1.获取元素对象
			  2.验证年份的函数：4位数字
			  3.验证月份的函数：1-12数字 01-09 或者1-9
			  4.年份和月份添加失去焦点事件*/
			//1.获取元素对象
			var inputs=document.getElementsByTagName('input');
			var yearError=document.getElementById('yearError');
			var monthError=document.getElementById('monthError');
			//2.验证年份的函数：4位数字
			function checkyear(obj){
				//验证obj内部的值是否是4位数字
				var str=obj.value;
				//4位数字的正则表达式:\d表示0-9的数字，{n}表示前面的字符出现n次
				var reg=/^\d{4}$/;
				if(!str.match(reg)){//不匹配
					yearError.innerHTML="输入错误，年份为4位数字";
				}else{
					yearError.innerHTML='';
				}
			}
                function checkmonth(obj){
				//验证obj内部的值是否是4位数字
				var str=obj.value;
				//1-9或者01-09  10-12
				//？表示前面字符出现0次或1次
				var reg=/^(0?[1-9]|1[0-2])$/;
				if(!str.match(reg)){//不匹配
					monthError.innerHTML="输入错误，月份为01-12";
				}else{
					monthError.innerHTML='';
				}
			}
			//年份输入框失去焦点事件
			inputs[0].onblur=function(){
				checkyear(this);
			}	
			inputs[1].onblur=function(){
				checkmonth(this);
			}	
		</script>
	</body>
</html>
